.right_play_list {
  z-index: 100;
  position: relative;
  padding: 1em 0;
  height: 100%;
  transition: filter .6s, opacity .6s;

  .right_play_list_container {
    width: 100%;
    transform: none;

    .right_play_list_item {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: .8rem 3rem;
      background-color: #00000022;
      transition: background-color .3s;
      cursor: default;

      .song_title {
        flex: 1;
        font-family: 'SourceHanSans-Light';
        position: relative;
        font-size: 1.2rem;
        font-weight: 700;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      &:hover .song_title {}

      .function_button {
        display: flex;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s;

        .transparent_button {
          margin-left: .5em;
        }

        .button {
          font-size: 1.4rem;
        }
      }

      &:hover {
        background-color: #ffffff22;

        .function_button {
          opacity: 1;
          pointer-events: inherit;
        }
      }

      &.active {
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 3px;
          height: 100%;
          background-color: #fff;
          box-shadow: 0 0 6px #fff;
        }
      }

      &.invalid {
        &::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          width: 3px;
          height: 100%;
          background-color: red;
          box-shadow: 0 0 6px red;
        }
      }
    }
  }
}